<script setup lang="ts">
import { LockOutlined } from '@ant-design/icons-vue';
import { useFeatureUnlock, useWorld } from '../../../composables';
import type { FeatureId } from '../../../game/data/feature-unlock/type';
import PageContainer from '../components/page.vue';

const { activeMenu, menuList, changeMenu } = useWorld();
const { state: featureUnlockState } = useFeatureUnlock();

function isUnlocked(featureId: FeatureId) {
  return featureUnlockState.value.unlockedFeatures.includes(featureId);
}
</script>

<template>
  <page-container title="世界">
    <div class="grid grid-cols-3 gap-2 p-2">
      <a-button
        v-for="menu in menuList"
        :key="menu.id"
        :disabled="activeMenu === menu.id || !isUnlocked(menu.id)"
        @click="changeMenu(menu.id)"
      >
        <lock-outlined v-if="!isUnlocked(menu.id)" />
        <span v-else>{{ menu.label }}</span>
      </a-button>
    </div>
  </page-container>
</template>
